<template>
	<div>
		<el-container>
			<el-aside>
				<Navigation/>
			</el-aside>
			<el-container>
				<el-header>
					<BreadCrumb :navName="navs"/>
				</el-header>
				<el-main>
					<div class="rightButton">
						<el-button size="small" type="primary" @click="cancelOrder()" v-if="order.orderStatus!=4">取消订单</el-button>
						<el-button size="small" type="info" v-if="order.orderStatus==4" disabled>已取消</el-button>
					</div>
					<div class="taskInfo">
						<el-form ref="form" :model="order" label-width="150px">
							<div class="taskInfo">
								<el-row>
									<el-col :span="11">
										<el-form-item label="订单编号：">
											<span>{{order.id}}</span>
										</el-form-item>
									</el-col>
									<el-col :span="11">
										<el-form-item label="创建时间：">
											<span>{{dateFormat(order.createTime)}}</span>
										</el-form-item>
									</el-col>
								</el-row>

								<el-row>
									<el-col :span="22">
										<el-form-item label="任务编号：">
											<span>{{order.taskId}}</span>
										</el-form-item>
									</el-col>
								</el-row>

								<el-row>
									<el-col :span="11">
										<el-form-item label="商品编号：">
											<span>{{order.businessId}}</span>
										</el-form-item>
									</el-col>
									<el-col :span="11">
										<el-form-item label="商品名称：">
											<span>{{order.wareName}}</span>
										</el-form-item>
									</el-col>
								</el-row>

								<el-row>
									<el-col :span="11">
										<el-form-item label="订单金额：">
											<span>{{order.orderPrice}}糖果币</span>
										</el-form-item>
									</el-col>
									<el-col :span="11">
										<el-form-item label="商户：">
											<span>{{order.venderName}}</span>
										</el-form-item>
									</el-col>
								</el-row>

								<el-row>
									<el-col :span="11">
										<el-form-item label="用户编号：">
											<span>{{order.userId}}</span>
										</el-form-item>
									</el-col>
									<el-col :span="11">
										<el-form-item label="用户昵称：">
											<span>{{order.userName}}</span>
										</el-form-item>
									</el-col>
								</el-row>
							</div>

							<div class="rightButton">
								<el-button size="small" type="primary" @click="send()" v-if="order.orderStatus==1">发货</el-button>
								<el-button size="small" type="primary" @click="editSend()" v-if="order.wareType==1&&order.orderStatus==2">修改发货信息</el-button>
							</div>

							<div class="taskInfo" v-if="order.wareType==1">
								<el-row>
									<el-col :span="22">
										<el-form-item label="商品类型：">
											<span>实体商品</span>
										</el-form-item>
									</el-col>
								</el-row>

								<el-row>
									<el-col :span="11">
										<el-form-item label="收货联系人：">
											<span>{{order.receiveName}}</span>
										</el-form-item>
									</el-col>
									<el-col :span="11">
										<el-form-item label="联系电话：">
											<span>{{order.receiveTel}}</span>
										</el-form-item>
									</el-col>
								</el-row>

								<el-row>
									<el-col :span="22">
										<el-form-item label="收货地址：">
											<span>{{order.receiveAddress}}</span>
										</el-form-item>
									</el-col>
								</el-row>

								<el-row>
									<el-col :span="22">
										<el-form-item label="发货状态：">
											<span v-if="order.orderStatus==1">未发货</span>
											<span v-if="order.orderStatus==2">已发货</span>
											<span v-if="order.orderStatus==3">已收货</span>
											<span v-if="order.orderStatus==4"><el-tag type="danger">订单已取消</el-tag></span>
										</el-form-item>
									</el-col>
								</el-row>

								<el-row>
									<el-col :span="11">
										<el-form-item label="物流单号：">
											<span>{{order.logisticNo}}</span>
										</el-form-item>
									</el-col>
									<el-col :span="11">
										<el-form-item label="快递公司：">
											<span>{{order.logisticCompany}}</span>
										</el-form-item>
									</el-col>
								</el-row>

								<el-row>
									<el-col :span="22">
										<el-form-item label="发货时间：">
											<span>{{dateFormat(order.sendTime)}}</span>
										</el-form-item>
									</el-col>
								</el-row>

								<el-dialog :visible.sync="dialog1">
									<el-row>
										<el-col :span="11">
											<el-form-item label="订单编号：">
												{{order.id}}
											</el-form-item>
										</el-col>
										<el-col :span="11">
											<el-form-item label="商品编号：">
												{{order.businessId}}
											</el-form-item>
										</el-col>
									</el-row>
									
									<el-row>
										<el-col :span="22">
											<el-form-item label="发货快递单号：">
												<el-input v-model="order.logisticNo"></el-input>
											</el-form-item>
										</el-col>
									</el-row>

									<el-row>
										<el-col :span="22">
											<el-form-item label="快递公司：">
												<el-select v-model="order.logisticCompany" placeholder="请选择快递公司">
													<el-option label="顺丰速运" value="顺丰速运"></el-option>
													<el-option label="中通" value="中通"></el-option>
													<el-option label="圆通" value="圆通"></el-option>
													<el-option label="韵达" value="韵达"></el-option>
												</el-select>
											</el-form-item>
										</el-col>
									</el-row>
									<div slot="footer" class="dialog-footer">
										<el-button @click="dialog1 = false">取 消</el-button>
										<el-button type="primary" @click="realSend()">{{order.orderStatus==1?"发 货":"修改发货信息"}}</el-button>
									</div>
								</el-dialog>
							</div>

							<div class="taskInfo" v-if="order.wareType==2">
								<el-row>
									<el-col :span="22">
										<el-form-item label="商品类型：">
											<span>电子商品</span>
										</el-form-item>
									</el-col>
								</el-row>

								<el-row>
									<el-col :span="11">
										<el-form-item label="收货联系人：">
											<span>{{order.receiveName}}</span>
										</el-form-item>
									</el-col>
									<el-col :span="11">
										<el-form-item label="联系电话：">
											<span>{{order.receiveTel}}</span>
										</el-form-item>
									</el-col>
								</el-row>
							
								<el-row>
									<el-col :span="22">
										<el-form-item label="发货状态：">
											<span v-if="order.orderStatus==1">未发货</span>
											<span v-if="order.orderStatus==2">已发货</span>
											<span v-if="order.orderStatus==3">已收货</span>
											<span v-if="order.orderStatus==4"><el-tag type="danger">订单已取消</el-tag></span>
										</el-form-item>
									</el-col>
								</el-row>

								<el-row>
									<el-col :span="22">
										<el-form-item label="发货时间：">
											<span>{{order.sendTime}}</span>
										</el-form-item>
									</el-col>
								</el-row>

								<el-dialog :visible.sync="dialog2">
									<el-row>
										<el-col :span="11">
											<el-form-item label="订单编号：">
												{{order.id}}
											</el-form-item>
										</el-col>
										<el-col :span="11">
											<el-form-item label="商品编号：">
												{{order.businessId}}
											</el-form-item>
										</el-col>
									</el-row>
									<div slot="footer" class="dialog-footer">
										<el-button @click="dialog2 = false">取 消</el-button>
										<el-button type="primary" @click="realSend()">发 货</el-button>
									</div>
								</el-dialog>
							</div>

							<el-form-item>
								<el-button @click="reback()">返回</el-button>
							</el-form-item>
						</el-form>
					</div>
					
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	import Navigation from '../../Navigation'
	import BreadCrumb from '../../BreadCrumb'
import { setTimeout } from 'timers';
	export default{
		name:'OrderLoterryDetail',
		methods: {
			dateFormat(time) {
				if(time==null){
					return null;
				}
				var date=new Date(time);
				var year=date.getFullYear();
				/* 在日期格式中，月份是从0开始的，因此要加0
				* 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				* */
				var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
				var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
				var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
				var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
				var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
				// 拼接
				return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
			},
			cancelOrder(){
				var that = this;
				this.$api.post('/order/update',{"id":that.order.id,"orderStatus":4},function(data){
					if(data.flag=="success"){
						that.$message({
							message: "订单取消成功",
							type: 'success'
						});
						that.reloadPage();
					} else{
						that.$message.error('订单取消失败');
					}
				});
			},
			send(){
				if(this.order.wareType==1){
					this.dialog1 = true;
				} else{
					this.dialog2 = true;
				}
			},
			editSend(){
				this.dialog1 = true;
			},
			reloadPage(){
				setTimeout(function(){
					window.location.reload()
				},200)
			},
			realSend(){
				var that = this;
				var vo = {};
				if(this.order.wareType==1){
					vo = {"id":that.order.id,"orderStatus":2,"logisticNo":that.order.logisticNo,"logisticCompany":that.order.logisticCompany};
				} else{
					vo = {"id":that.order.id,"orderStatus":2};
				}
				that.dialog1 = false;
				that.dialog2 = false;
				this.$api.post('/order/update',vo,function(data){
					var temp = that.order.orderStatus==1?"发货":"修改发货信息";
					if(data.flag=="success"){
						that.$message({
							message: temp+"成功",
							type: 'success'
						});
						that.reloadPage();
					} else{
						that.$message.error(temp+'失败');
					}
				});
			},
			reback(){
				this.$router.push('/order/ware');
			}
		},
		mounted(){
			var that = this;
			this.$api.get('/order/get/'+that.$route.params.id,null,function(data){
				if(data.flag=="success"){
					that.order = data.data;
				} else{
					that.$message.error(data.msg);
				}
			});
		},
		data:function(){
			return {
				dialog1:false,
				dialog2:false,
				navs:["订单管理","抽奖商品订单","订单详情"],
				order:{}
			}
		},
		computed:{
		},
		components:{
			Navigation,
			BreadCrumb
		}
	}
</script>

<style scoped>
	.taskInfo{
		padding: 20px;
		border: 1px solid #dddddd;
		margin-bottom: 20px;
	}
	#changePercent{
		width: 110px !important;
	}
	.rightButton{
		text-align: right;
		margin-bottom: 10px;
	}
</style>